<template>
  <div>
    <el-tabs v-model="chooseName" type="border-card" @tab-click="tabClick">
        <el-tab-pane :label="'关注的人'+'('+`${totalFocus}`+')'" name="focus">
          <UserList :list="focusList" v-if="focusList.length!==0"></UserList>
          <div v-else>没有关注的人</div>
        </el-tab-pane>
        <el-tab-pane :label="'粉丝'+'('+`${totalFans}`+')'" name="fans">
          <UserList v-if="fansList.length!==0" :list="fansList"></UserList>
          <div v-else>没有粉丝，真拉啊</div>
        </el-tab-pane>
        <el-tab-pane label="我的收藏" name="collection">
          <div v-if="!chooseCollectionFolder">
            <div class="header">
              <div>我的收藏夹</div>
              <el-button @click="newFolder"><i class="iconfont icon-wenjianjiatianjia"></i> 新建收藏夹</el-button>
              <el-dialog
                title="新建收藏夹"
                :visible.sync="folderVisible"
                width="30%"
                >
                <span slot="footer" class="dialog-footer">
                <el-button @click="folderVisible = false">取 消</el-button>
                <el-button type="primary" @click="confirmSubmit">确 定</el-button>
                </span>
                <el-form :model="folderForm" :rules="rules" label-width="100px" class="demo-ruleForm">
                  <el-form-item label="收藏夹名称" prop="name">
                    <el-input placeholder="请填写名称" v-model="folderForm.name"></el-input>
                  </el-form-item>
                  <el-form-item label="收藏夹简介">
                    <el-input placeholder="可填写简介" type="textarea" v-model="folderForm.description"></el-input>
                  </el-form-item>
                </el-form>
              </el-dialog>
          </div>
          <div v-for="item in folderList" :key="item.id" @click="chooseFolder(item.id, item.name)" class="folderContainer">
            <div class="folderName"><i class="iconfont icon-wenjianjia" style="margin-right:10px"></i>{{item.name}}</div>
            <div class="description">{{item.description}}</div>
            <div class="folderFooter">
              <div class="folderCreateTime">创建于{{moment(item.createAt).format('YYYY-MM-DD hh:mm:ss')}}</div>
              <div @click.stop="openEditDialog(item.id, item.name, item.description)" class="editButton">编辑收藏夹</div>
            </div>
            </div>
          </div>
          <div v-else>
            <el-page-header @back="goBack" :content="selectName"></el-page-header>
            <div v-if="collectionList.length !== 0">
              <div v-for="item in collectionList" :key="item.id" class="collectionItem">
                <div class="collectionTitle" @click="toDetail(item.id)">{{item.title}}</div>
                <div v-html="item.content" class="collectionContent"></div>
                <div>
                  <span class="userName" @click="toProfile(item.author.id)"
                  :style="{color: levelColor[level(item.author.experience).level]}">
                  {{item.author.name}}
                  </span><span class="subTime">发布于：{{moment(item.createTime).format('YYYY-MM-DD hh:mm:ss')}}
                  </span>
                </div>
                <div class="footer">
                  <div class="collectionTime">收藏于{{moment(item.collectionCreateTime).format('YYYY-MM-DD hh:mm:ss')}}</div>
                  <div class="deleteCollection" @click="cancelCollection(item.id)">删除收藏</div>
                </div>
              </div>
            </div>
            <div v-else>该收藏夹空空如也</div>
          </div>
          <el-dialog
              title="修改收藏夹"
              :visible.sync="editDialogVisible"
              width="50%"
            >
                <el-form :model="editForm" :rules="rules" class="demo-ruleForm">
                  <el-form-item label="收藏夹名称" prop="name">
                    <el-input placeholder="请输入修改后的收藏夹名称" v-model="editForm.name">
                      <i slot="prefix" class="iconfont icon-24gf-tags"></i>
                    </el-input>
                  </el-form-item>
                  <el-form-item label="收藏夹简介">
                    <el-input placeholder="请输入修改后的收藏夹简介" type="textarea" v-model="editForm.description"></el-input>
                  </el-form-item>
                </el-form>
                <div class="btnBox">
                  <el-button @click="editFolder" type="primary">修改收藏夹</el-button>
                </div>
                <div class="line">
                  <span class="text">或者</span>
                </div>
                <div class="btnBox">
                  <el-button @click="cancelFolder" type="danger">删除收藏夹</el-button>
                </div>
            </el-dialog>
        </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import UserList from '../../components/UserList.vue'
import moment from 'moment'
import levelColor from '../../constant/levelColor'
import level from '../../utils/level'
export default {
  data () {
    return {
      editForm: {
        name: '',
        description: ''
      },
      folderVisible: false,
      folderForm: {},
      focusList: [],
      fansList: [],
      chooseName: 'focus',
      chooseCollectionFolder: false,
      visible: false,
      folders: [],
      folderList: [],
      selectName: '',
      collectionList: [],
      rules: {
        name: [
          { required: true, message: '请输入收藏夹名称', trigger: 'blur' }
        ]
      },
      selectedFolder: '',
      editDialogVisible: false,
      editFolderId: '',
      levelColor,
      totalFans: 0,
      totalFocus: 0
    }
  },
  components: {
    UserList
  },
  created () {
    this.$bus.$emit('profile', 5)
    this.getFocusList()
    this.getFansList()
    this.getCollectionFolderList()
    this.chooseName = this.$route.query.tab
  },
  methods: {
    cancelFolder () {
      this.$confirm('此操作将永久删除该收藏夹, 是否继续?', '删除收藏夹', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await this.$http.post(`/moment/collection/cancelCollection/${this.editFolderId}`)
        this.editDialogVisible = false
        this.getCollectionFolderList()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      })
    },
    async editFolder () {
      await this.$http.post(`/moment/updateFolder/${this.editFolderId}`, this.editForm)
      this.editDialogVisible = false
      this.getCollectionFolderList()
    },
    openEditDialog (id, name, description) {
      this.editFolderId = id
      this.editDialogVisible = true
      this.editForm['description'] = description
      this.editForm['name'] = name
    },
    toProfile (id) {
      this.$router.push(`/profile/${id}`)
    },
    toDetail (id) {
      this.$router.push(`/detail/${id}`)
    },
    async cancelCollection (momentId) {
      this.$confirm('此操作将永久删除该收藏, 是否继续?', '删除收藏', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await this.$http.post(`/moment/collections/${momentId}/0`)
        this.getCollectionList(this.selectedFolder)
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      })
    },
    async confirmSubmit () {
      await this.$http.post('/moment/collection/addCollectionFolder', this.folderForm)
      this.folderVisible = false
      this.getCollectionFolderList()
      this.$message.success('新建收藏夹成功！')
    },
    newFolder () {
      this.folderVisible = true
    },
    goBack () {
      this.chooseCollectionFolder = false
    },
    async chooseFolder (id, name) {
      this.chooseCollectionFolder = true
      this.selectName = name
      this.selectedFolder = id
      this.getCollectionList(id)
    },
    async getCollectionList (id) {
      const {data: res} = await this.$http.get(`/moment/collection/${id}`)
      this.collectionList = res
      console.log(res, 'reslist')
    },
    async getCollectionFolderList () {
      const {data: res} = await this.$http.get('/moment/collectionFolderList')
      this.folderList = res
    },
    async getFocusList () {
      const {id: userId} = JSON.parse(window.sessionStorage.getItem('userInfo'))
      const res = await this.$http.get(`/action/focusList/${userId}`)
      this.focusList = res.data
      this.totalFocus = res.data.length
    },
    async getFansList () {
      const {id: userId} = JSON.parse(window.sessionStorage.getItem('userInfo'))
      const res = await this.$http.get(`/action/fansList/${userId}`)
      this.fansList = res.data
      this.totalFans = res.data.length
    },
    tabClick (tab) {
      if (tab.index === '0') {
        this.$router.push('/profile/focus?tab=focus')
        this.getFocusList()
      } else if (tab.index === '1') {
        this.$router.push('/profile/focus?tab=fans')
        this.getFansList()
      } else if (tab.index === '2') {
        this.$router.push('/profile/focus?tab=collection')
      }
    },
    moment,
    level
  }
}
</script>

<style lang="less" scoped>
.collectionTime {
  font-size: 12px;
  margin-top: 5px;
}
.el-page-header {
  margin-bottom: 10px;
}
.folderName {
  color: #5a9cf8;
  font-weight: 500;
}
.folderCreateTime {
  font-size: 14px;
}
.editButton {
  color: #5a9cf8;
}
.btnBox {
  display: flex;
  justify-content: center;
}
.line{
  margin: 15px 0;
  height:0;
  border-top:1px solid #000;
  text-align:center;
}
.text{
  position:relative;
  top:-8px;
  background-color:#fff;
}
.folderContainer {
  cursor: pointer;
  border: 1px solid #eee;
  padding: 10px;
  margin: 10px 0;
  .description {
    font-size: 14px;
    margin: 10px 0;
    color: #888;
    line-height: 1.6;
  }
}
.userName {
  font-size: 12px;
}
.userName:hover {
  cursor: pointer;
}
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.collectionItem {
  padding: 5px;
  border: 1px solid #eee;
}
.collectionTitle {
  color: #333;
}
.collectionTitle:hover {
  color: #5a9cf8;
  cursor: pointer;
}
.collectionContent {
  color: #888;
  font-size: 12px;
  line-height: 1.6;
  margin: 10px 0;
}
.subTime {
  color: rgb(153, 153, 153);
  margin-left: 5px;
  font-size: 12px;
}
.footer {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  .deleteCollection {
    color: red;
    cursor: pointer;
  }
}
.folderFooter {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
</style>>
